<template>

    <echart :options='option' class='echarts'></echart>


</template>

<style scoped>
.echarts {
  height: 100%;
  width: 100%;
  border-radius: 4px;
}
</style>

<script>
var xData = ['周一','周二','周三','周四','周五','周六','周日'];

export default {
  data: function() {
    let data = [];

    for (let i = 0; i <= 360; i++) {
      let t = (i / 180) * Math.PI;
      let r = Math.sin(2 * t) * Math.cos(2 * t);
      data.push([r, i]);
    }

    return {
      option: {
        backgroundColor: "#0D2A42",
        title: {
          text: "网络负载                                        ",
          x: "4%",

          textStyle: {
            color: "#fff",
            fontSize: "20"
          },
          backgroundColor:"#0A3C60",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff"
            }
          }
        },
        grid: {
          borderWidth: 0,
          top: 110,
          bottom: 95,
          textStyle: {
            color: "#fff"
          }
        },
        legend: {
          x: "4%",
          top: "11%",
          textStyle: {
            color: "#90979c"
          },
          data: ["带宽", "发包数"]
        },

        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            data: xData
          }
        ],
        yAxis: [
          {
            name: "K",
            type: "value",
            max: 1000,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            splitArea: {
              show: false
            }
          },
          {
            type: "value",
            // scale: true,
            name: "Mbps",
            max: 100,
            min: 0,
            boundaryGap: [0.2, 0.2],
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            splitArea: {
              show: false
            }
          }
        ],
        dataZoom: [
          {
            show: true,
            height: 30,
            xAxisIndex: [0],
            bottom: 30,
            start: 10,
            end: 80,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5"
            },
            textStyle: {
              color: "#fff"
            },
            borderColor: "#90979c"
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            name: "带宽",
            type: "bar",
            stack: "总量",
            itemStyle: {
              normal: {
                color: "#2c7ccb",
                barBorderRadius: 0,
                label: {
                  show: false,
                  position: "top",
                  formatter: function(p) {
                    return p.value > 0 ? p.value : "";
                  }
                }
              }
            },
            data: [
              327,
              776,
              507,
              200,
              800,
              482,
              204
            ]
          },
          {
            name: "发包数",
            type: "line",
            stack: "总量",
            symbolSize: 10,
            symbol: "circle",
            itemStyle: {
              normal: {
                color: "#6cf5f3",
                barBorderRadius: 0,
                label: {
                  show: false,
                  position: "top",
                  formatter: function(p) {
                    return p.value > 0 ? p.value : "";
                  }
                }
              }
            },
            data: [
              36,
              93,
              62,
              10,
              19,
              15,
              48
            ]
          }
        ]
      }
    };
  }
};
</script>